import { useRef, useState } from "react";

import { Card } from "antd";
const { Meta } = Card;
import VideoData from "./videoData/index";
import "./index.scss";
import VideoComponent from "@/components/videoComponent";

const CardComponent = (props: any) => {
  const { imgUrl, video, id } = props;
  const cardRef = useRef<any>(null);
  const [isMouseOver, setIsMouseOver] = useState<any>(false);
  let playTimer: any = null;
  const mouseover = (e: any) => {
    e.stopPropagation();
    if (!isMouseOver) setIsMouseOver(true);
    playTimer = setTimeout(() => {
      videoRef.current.play();
    }, 2000); //2秒后播放
  };
  const mouseout = (e: any) => {
    e.stopPropagation(); //阻止捕获
    if (isMouseOver) setIsMouseOver(false);
    if (!playTimer) clearTimeout(playTimer); //自己理解
  };
  const videoRef = useRef<any>(null);
  const imgRef = useRef<any>(null);
  const getImgHeight = () => {
    if (imgRef.current) {
      // console.log(imgRef, imgRef.current.height);
      return imgRef.current.height;
    }
  };
  const imgNode = <img ref={imgRef} src={imgUrl} alt="" />;
  const func = () => {
    if (isMouseOver) return <VideoComponent videoSrc={video} />;
    // if (isMouseOver) return <video ref={videoRef} src={video} ></video>;
    if (!isMouseOver) return imgNode;
  };

  const toDeatil = () => {
    const path = `/videodetail/${id}`;
    window.open(path, "_blank"); // 在新窗口中打开指定路径
  };

  return (
    <div className="card-component">
      <Card
        ref={cardRef}
        hoverable={true}
        style={{
          background: "transparent",
          border: "none",
          height: `${getImgHeight() + 67}px`,
        }}
        cover={func()}
        onMouseEnter={mouseover}
        onMouseLeave={mouseout}
        onClick={toDeatil}
      >
        <Meta
          style={{ color: "#ffffff" }}
          title="标题名字123"
          description={`作者名字123${isMouseOver} id为${id}`}
        />
        {!isMouseOver ? <VideoData></VideoData> : ""}
      </Card>
    </div>
  );
};

export default CardComponent;
